<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { listShop } from "@/api/shop/shop";
/*  查询店铺列表*/
const shopList = ref([]); // 存储所有店铺
const displayShops = ref([]); // 存储要显示的4个店铺
let timer = null;

// 从店铺列表中随机选择4个店铺
function getRandomShops() {
  if (shopList.value.length < 4) return;
  const tempShops = [...shopList.value];
  const result = [];
  for (let i = 0; i < 4; i++) {
    const randomIndex = Math.floor(Math.random() * tempShops.length);
    result.push(tempShops.splice(randomIndex, 1)[0]);
  }
  displayShops.value = result;
  // console.log(displayShops.value);
}
function getShopList() {
  listShop()
    .then((res) => {
      shopList.value = res.rows;
      // console.log(shopList.value);
      getRandomShops(); // 初始化显示
    })
    .catch((err) => {
      console.log(err);
    });
}
// 组件挂载时启动定时器
onMounted(() => {
  getShopList();
  timer = setInterval(() => {
    getRandomShops();
  }, 300000); // 每30秒执行一次
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<template>
  <div class="recommend">
    <div class="top">
      <span class="left-text">店铺推荐</span>
      <span class="right-text">更多店铺》》</span>
    </div>
    <div class="under1-list">
      <ul>
        <router-link
          v-for="(shop, index) in displayShops"
          :key="shop.id"
           :to="{ 
            path: '/shopDetail',
            query: { shopName: shop.shopName }
          }"
        >
          <li v-if="index < 2">
            <div class="list-left">
              <div class="list-left-img">
                <img :src="shop.shopPic" alt="" />
              </div>
              <div class="list-left-title">
                <div class="list-left-titlename">
                  <h4>{{ shop.shopName }}</h4>
                </div>
                <div class="list-left-main">
                  <p>{{ shop.shopDesc }}</p>
                </div>
              </div>
            </div>
            <div class="list-right" v-if="displayShops[index + 2]">
              <div class="list-right-img">
                <img :src="displayShops[index + 2].shopPic" alt="" />
              </div>
              <div class="list-right-title">
                <div class="list-right-titlename">
                  <h4>{{ displayShops[index + 2].shopName }}</h4>
                </div>
                <div class="list-right-main">
                  <p>{{ displayShops[index + 2].shopDesc }}</p>
                </div>
              </div>
            </div>
          </li>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.recommend {
  width: 100%;
  display: block;
}
.top {
  width: 1400px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  font-size: 21px;
  color: #7ebdf4;
}
.under1-list {
  width: 80%;
  margin: 0 auto;
}
.under1-list ul li {
   display: flex;
  padding: 20px 40px;  /* 增加内边距 */
  margin-bottom: 20px; /* 增加底部间距 */
  background: #f8f9fa; /* 添加背景色 */
  border-radius: 8px;  /* 添加圆角 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
.list-left {
  flex: 1;
  display: flex;
}
.list-right {
  flex: 1;
  display: flex;
  border-left: 1px solid;
}
.list-left-img img {
  height: 250px;
  width: 350px;
  padding-left: 50px;
}
.list-left-title {
  margin-left: 10px;
  flex-direction: column;
}
.list-right-img img {
  height: 250px;
  width: 350px;
}
.list-right-title {
  margin-left: 10px;
  flex-direction: column;
}
.list-right-img img {
  height: 250px;
  padding-left: 50px;
}
.list-left-img img,
.list-right-img img {
  height: 250px;
  width: 350px;
  padding-left: 50px;
  transition: all 0.3s ease; /* 添加过渡效果 */
  border-radius: 10px;
}

/* 添加悬浮效果 */
.list-left-img img:hover,
.list-right-img img:hover {
  transform: scale(1.05); /* 放大效果 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* 添加阴影 */
  cursor: pointer; /* 改变鼠标样式 */
}
</style>
